<html>
	<head>
		<title>首页</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	</head>
	<style type="text/css">
	body{ background-image:url(images/back.jpg);
 background-repeat:repeat-x;
 margin:0px;
}
.wrapper{
　　min-height:100%;
　　_height:100%;
　　margin-bottom:-120px; /*假定页脚的高度为120px*/
　　}
/*假定页脚的高度为120px*/
	.top{
		width: 100%;height: 80px;background: #B10000;
		     }
	 .them{ font-family:"萌妹爱仓鼠智能机中文字体";
     font-size:50px;
	 font-style:italic;
	 margin-left:20px;
     color:#000000;}
	 ul,li,ol{margin:0px;padding:0px;list-style:none;}
     a{text-decoration: none;}
	img{border:0px;}
		.P10Clear{clear:both;}
		.P10Head{height: 40px;background: black;width: 100%;_overflow:hidden;}
		.P10HContent{width:899px;height:40px;margin:0 auto;}
				.P10HMenu{float:left;height:40px;}
		.P10HMNav{width:140px;height:40px;float: left;margin-left:1px;text-align: center;position:relative;}
		.P10HMNav a{display:block;width:100%;height:40px;line-height:40px;color:white;font-family:微软雅黑;font-size:16px;margin-left:-50px }
		.P10HMNav a:hover,.P10HMNav a.act{background:#690000;}
		.P10SubMenu{width:200px;height:auto;background:white;float:left;position:relative;}
		.P10SCol{width:100%;background:white;box-shadow: 4px 2px 5px rgba(0, 0, 0, 0.2);position:absolute;z-index:2; margin-left:-50px;}
		.P10SCTitle{width:100%;height:40px;line-height:40px;}
		.P10SCTitle a{display:block;width:100%;height:100%;color:#160016;text-indent:20px;cursor:default;}
		.P10SCTitle a:hover,.P10SCTitle a.act{background: #88766e;color:white;}	 
	h2 { font-size:13px; color:#FDFDFD}
	#player { border:1px solid #333; width:800px; height:450px; margin-left:450PX; }
#operator { width:1100px; margin:20px auto }
#operator .btnLeft, #operator .btnRight { float:left; width:33px; height:86px }
#operator .btnLeft { background:#222 url(images/bg.png) no-repeat 0 -20px }
#operator .btnLeft:hover { background:#222 url(images/bg.png) no-repeat -80px -20px }
#operator .btnRight:hover { background:#222 url(images/bg.png) no-repeat -120px -20px }
#operator .btnRight { float:right; background:#222 url(images/bg.png) no-repeat -40px -20px }
#operator .thumbWrap { _width:718px; height:66px; margin:0 38px; overflow:hidden }
#operator .thumbnails { width:3000px }
#operator .thumbnails li { float:left; height:132px; margin-right:5px }
#operator .thumbnails li:hover { margin-top:0px; cursor:pointer }
#operator .thumbnails .img { width:120px; border:2px solid #222; padding:1px }
#operator .thumbnails .detail { width:110px; height:66px; padding:8px; background:url(images/bg.png) no-repeat -300px -20px; text-align:left }
#operator .thumbnails .num { margin-top:12px; color:black }
#operator .thumbnails .poster span { font-size:11px }
#operator .thumbnails .current .detail { background:url(images/bg.png) no-repeat -440px -20px }
#operator .thumbnails .current .num { margin-left:6px }
#operator .track { height:21px; margin:0 38px; text-align:left }
#operator .slideDragger { width:200px; height:21px; margin-top:5px; background:url(images/bg.png) no-repeat 0 -173px }
#operator .slideDragger .cover { height:21px; margin-left:20px; background:url(images/bg.png) no-repeat right -152px }
/*----*/
.duiqi{
	float: left;
	width: 30%;	
}
.popular h3{
	font-size:2em;
	margin-left: 8em;
	padding-top: 2.5em;
	color:#aa381e;
	width:45%;
}


 ul.popular-in li{
	list-style:none;
	width:65%;
	border-bottom:1px solid #BAB6B6;
	margin-left: 13em;
}
 ul.popular-in li a{
	color:#848484;
	text-decoration:none;
	padding:1em 0;
	display:block;
	font-size: 1.2em;
}

 ul.popular-in li a:hover{
	color:#aa381e;

}
 ul.popular-in li a i{
	width: 22px;
	height: 18px;
	display: inline-block;
	background: url(images/img-sprite.png) no-repeat -104px -22px;
	vertical-align: sub;
	margin-left: 10em;
}
.phone{
	padding:  0;
}
/*----*/
ul.number{
	padding-top:0.5em;
}
ul.number p{
	font-size: 1.6em;
	margin-left: 10em; 
	color:#2e8e26;
}
ul.number li{
	list-style:none;
}
ul.number li a{
	text-decoration:none;
 }
ul.number li span{
	border-top:1px solid #BAB6B6;
 }
ul.number li a,ul.number li span{
	color:#2e8e26;
	padding:0.6em 0;
	display:block;	
	border-bottom:1px solid #BAB6B6;
	font-size: 1.7em;
	margin-left: 8em; 
}
ul.number li a:hover{
	color:#aa381e;

}
ul.number li i{
	width: 40px;
	height: 24px;
	display: inline-block;
	background: url(images/img-sprite.png) no-repeat -220px -19px;
	vertical-align: sub;
	margin-right: 0.5em;
}
ul.number li i.mail{
	background-position:-267px -21px;
}
.popular p{
	margin-left: 13em;
	color:#aa381e;
}
.popular input[type="text"],.popular input[type="submit"] {
	font-size: 1.2em;
	width: 80%;
	padding: 0.5em 1.5em;
	margin: 0.5em 0;
	background: #fff;
	outline: none;
	border: none;
	color: #a9a7a7;
	-webkit-appearance: none;
	border-radius: 6px;
	-webkit-border-radius: 6px;
	-o-border-radius: 6px;
	-moz-border-radius: 6px;
	-ms-border-radius: 6px;
	margin-left: 10em;
}
.popular input[type="submit"]{
	color:#fff;
	background: #2e8e26;
	padding: 0.4em 0.8em;
	border-radius: 6px;
	-webkit-border-radius: 6px;
	-o-border-radius: 6px;
	-moz-border-radius: 6px;
	-ms-border-radius: 6px;
	width:85%;
	font-size:1.3em;
	
	transition: 0.5s all;
	-webkit-transition: 0.5s all;
	-o-transition: 0.5s all;
	-moz-transition: 0.5s all;
	-ms-transition: 0.5s all;
	display:block;
	margin-left: 10em;
}
.popular input[type="submit"]:hover{
	background:#aa381e;
}
.popular form{
	padding:1em 0;
}
/*----*/
/*----*/
.cup{ float: right; width:65%; height:100px;  margin-top: 130px;margin-left: 30px;}

.cup-in{
	border-radius: 14px;
	-webkit-border-radius: 14px;
	-o-border-radius: 14px;
	-moz-border-radius: 14px;
	-ms-border-radius: 14px;
	background:#fff;
	padding: 1em;
	margin-right: 120px;
	width: 30%;
	margin-bottom: 2em;
float:right;

}

.cup-in img{
	border-radius: 14px;
	-webkit-border-radius: 14px;
	-o-border-radius: 14px;
	-moz-border-radius: 14px;
	-ms-border-radius: 14px;
	 border:2px solid #ccc; padding:1px;
}
.img-responsive{
	width: 250px;
	height: 250px;
	
}
.cup-in p{
	color:#9a9a9a;
	font-size:1.3em;
	line-height:1.2em;
	padding:0.8em 0;
}
span.dollar{
	float:left;
	font-size:2em;
	color:#aa381e;

}
.details-in{
	float:right;
	margin-top:0.5em;
}
a.details{
	text-decoration:none;
	font-size:1.2em;
	color:#fff;
	background: #2e8e26;
	padding: 0.4em 0.6em;
	border-radius: 6px;
	-webkit-border-radius: 6px;
	-o-border-radius: 6px;
	-moz-border-radius: 6px;
	-ms-border-radius: 6px;
}
a.details:hover{
	background: #aa381e;
}

/*----*/
.footer_placeholder{clear:both;}
.footer{
	background:url(images/footer.png);
	width:100%;
	 height:60px;
	bottom: 0;
}
.shu{
	color:#ffffff; 
	font-size:18px; 
	text-align:center;   }
</style>
<script type="text/javascript">
//code by CNwander (cnwander@163.com)
//gloga
var slideA = 0.25, //滚动条缓冲速度
	slideRate = 20; //滚动条刷新频率 n/s
window.onload = function() {
	var thumbs = $("#operator li"),
		player = $("#player"),
		itemMargin = getStyle(thumbs[0],"marginRight"),
		itemMargin = itemMargin.substr(0,itemMargin.length-2)*1;
		itemW = thumbs[0].offsetWidth + itemMargin,
		contentW = itemW * thumbs.length;
	loadImg(thumbs[0].getAttribute("url"));	
	each(thumbs,thumbEvts);
	initScrollbar();
	function thumbEvts(){
		var obj = this,
			timer,
			toY = $(".img",obj).offsetHeight;
		//init items
		setStyle(obj,"marginTop",-toY+"px");
		//attach events
		obj.onmouseover = thumbOver;
		obj.onmouseout = thumbOut;
		obj.onclick = thumbDown;
		function thumbOver(e){
			slideTo(obj,"marginTop",0)
		}
		function thumbOut(e){
			e = e || event;
			var relatedTarget = e.toElement || e.relatedTarget;
			while(relatedTarget && relatedTarget != this){
				relatedTarget = relatedTarget.parentNode;
				if(!relatedTarget){
					slideTo(obj,"marginTop",-toY);
				}
			}			
		}		
		function slideTo(obj,rider,to,endFuc) {
			var from = getStyle(obj,rider);
			from = from.substr(0,from.length-2)*1;
			if(timer) window.clearInterval(timer);
			timer = window.setInterval(move,slideRate);		
			function move() {
				from += (to - from)/3;
				setStyle(obj,rider,from+"px");
				if(Math.round(to-from)==0) {
					window.clearInterval(timer);
					if(endFuc) endFuc();
					return;
				}
			}
		}
		function thumbDown() {
			each(thumbs,function(){
				this.className = "";
			});
			this.className = "current";
			loadImg(this.getAttribute("url"));
			return false;
		}
	}
	
	function initScrollbar() {
		var ctrlBar = $("#operator"),
			wrap = $(".thumbWrap",ctrlBar),
			content = $(".thumbnails",ctrlBar),
			track = $(".track",ctrlBar),
			dragger = $(".slideDragger",ctrlBar),
			leftBtn = $("a.btnLeft",ctrlBar),
			rightBtn = $("a.btnRight",ctrlBar);
		var wrapW = wrap.offsetWidth,
			trackW = track.offsetWidth,
			scale = wrapW/contentW,
			currentX = 0,
			timer;
		setStyle(dragger,"width",trackW*scale+"px");
		
		leftBtn.onclick = function(e){
			slideTo(currentX - itemW*3);
			this.blur();
			return false;
		}		
		rightBtn.onclick = function(e){
			slideTo(currentX + itemW*3);
			this.blur();
			return false;
		}
		attachWheel();
		function thumbWheel(e) {
			detachWheel();
			e = e || event;
			var dis = e.detail || -e.wheelDelta/20;
			slideTo(currentX + itemW*dis/2,attachWheel);
		}
		function attachWheel() {
			if(document.all) document.onmousewheel = thumbWheel;
			else document.addEventListener("DOMMouseScroll", thumbWheel, false);		
		}
		function detachWheel() {
			if(document.onmousewheel) document.onmousewheel = "";
			else document.removeEventListener("DOMMouseScroll", thumbWheel, false);		
		}
		dragger.firstChild.onmousedown = function(){return false;};  		
		dragger.onmousedown = function(e) {
			e = e || event;
			var lastX = e.clientX;			
			document.onmousemove = move;
			document.onmouseup = function(e){ 			
				document.onmousemove = null;
				document.onmouseup = null;	
			}
			function move(e) {
				e = e || event;
				var dis = e.clientX - lastX;
				dis /= scale;
				lastX = e.clientX;
				currentX += dis;
				currentX = currentX > contentW - wrapW ? contentW - wrapW : currentX;
				currentX = currentX < 0 ? 0 : currentX;	
				scrollTo(currentX);
			}	
		}	
		function slideTo(x,endFuc) {
			x = x > contentW - wrapW ? contentW - wrapW : x;
			x = x < 0 ? 0 : x;	
			timer = window.setInterval(move,20);
			function move() {
				currentX += (x - currentX)*slideA;
				if(Math.round(x - currentX) == 0) {
					window.clearInterval(timer);
					if(endFuc) endFuc();
					return;
				}
				scrollTo(currentX);
			}
		}
		function scrollTo(x) {
			setStyle(dragger,"marginLeft",x*scale+"px");
			setStyle(content,"marginLeft",-x+"px");
		}
	}
	function loadImg(url) {
		var img = new Image(),
			showTimer,
			opaStep = [0,0.05,0.1,0.15,0.2,0.25,0.3,0.4,0.5,0.7,1],
			bg = ["#888","#fff","#bbb","#888","#444","#222","#000","#000","#000","#000","#000"],
			p = 0,
			c = 0;
		img.src = url;
		player.innerHTML = "<img src=\"images/loading.gif\" style=\"margin-top:220px\"/>";
		if(img.width > 0) initImg();
		else img.onload = initImg;
		function initImg() {
			var width = img.width,
				height = img.height;
			setStyle(player,{width:width+"px",height:height+"px"});
			setOpacity(img,0);
			player.innerHTML = "";
			player.appendChild(img);
			showTimer = window.setInterval(show,50);
		}
		function show(){
			setStyle(player,"background",bg[p]);
			setOpacity(img,opaStep[p++]);
			if(p >= opaStep.length) window.clearInterval(showTimer);
		}
	}
	//common funcs
	//遍历对象
	function each(obj,fuc) {
		for(var key in obj) {
			obj[key].index = key;
			fuc.call(obj[key]);  
		}		
	}
	//设置样式
	function setStyle() {
		if(arguments.length == 2 &&  typeof arguments[1] == "object") {
			for(var key in arguments[1]) {
				arguments[0].style[key] = arguments[1][key];
			}
		} else if (arguments.length > 2) {
			arguments[0].style[arguments[1]] = arguments[2];
		}
	}
	//获取样式
	function getStyle(obj,prop) {
		if (obj.currentStyle) {
			return obj.currentStyle[prop];
		}
		else if (window.getComputedStyle) {
			prop = prop.replace (/([A-Z])/g, "-$1");
			prop = prop.toLowerCase ();
			return window.getComputedStyle (obj, "").getPropertyValue(prop);
		}
		return null;
	}
	function setOpacity(obj,n) {
		obj.style.cssText = "filter:alpha(opacity="+ n*100 +"); -moz-opacity:"+ n +"; opacity:"+ n;
	}
	//elements finder
	function $(s,wrap) {
		var eleExpr =  /([a-zA-Z0-9]*)([#\.]?)(\w+)[^\s+]*/g,
			result = [wrap || document];
		while(eleExpr.test(s)) {
			var tag = RegExp.$1,
				type = RegExp.$2,
				content = RegExp.$3,
				elems = [];
			for(var i=0; i<result.length; i++) {
				var temp;
				switch(type) {
					case "#":
						temp = [result[i].getElementById(content)];
						break;
					case ".":
						temp = getElemsByClassName(content,result[i],tag);
						break;
					default:
						temp = result[i].getElementsByTagName(tag+content);
				}
				for(var key in temp) {
					if(temp[key].nodeType == 1) elems.push(temp[key]);
				}					
			}
			result = [];
			for(var key in elems) {
				if(elems[key].nodeType == 1) result.push(elems[key]);
			}	
		}
		return result.length == 1 ? result[0] : result;
		function getElemsByClassName(classname,elem,tag) {
			var result = [],
				tag = tag || "*",
				allElems = elem.getElementsByTagName(tag) || elem.all;
			for(var i=0; i<allElems.length; i++){
				var list = allElems[i].className.split(" ");
				for(var j=0; j<list.length; j++){
					if(list[j] == classname) result.push(allElems[i]);
				}       
			}
			return result;
		}
	}
}
</script>
	<body>
	<div class="wrapper">
 			<div class="top">
 			<p class="them">COFFEE</p></div>
           	<div class='P10Head'>
			<div class='P10HContent'>
				<ul class='P10HMenu'>
					<li class='P10HMNav'><a class='act' href='#' title='' >所有咖啡分类</a></li>
					<li class='P10HMNav'><a target='_blank' href='#' title='' >店铺</a></li>
					<li class='P10HMNav'><a target='_blank' href='#' title='' >热销</a></li>
					<li class='P10HMNav'><a target='_blank' title='' ><form>
      <input style="width: 300px;height: 40px; margin-left: 400px;" type="test"  value="商品名称" >
    <input id="serach" style="margin-left: 700px; margin-top: -30px;"  type="button" value="搜索">
</form>
</a></li>

					<li class='P10HMNav'><a target='_blank' href='login.html' title='' style="margin-left: 65px;" >亲~请登录!</a></li>
		
				</ul>
				<div class='P10Clear'></div>
				<div class='P10SubMenu'>
					<!--二级栏目-->
					<div class='P10SCol'>
						<div class='P10SCTitle'><a href='#' title='' >咖啡/热卖</a></div>
						<div class='P10SCTitle' style='background:#f1f1f1;'><a href='#' title='' >口味</a></div>
						<div class='P10SCTitle'><a href='#' title='' >咖啡/热卖</a></div>
						<div class='P10SCTitle' style='background:#f1f1f1;'><a href='#' title='' >口味</a></div>
						<div class='P10SCTitle'><a href='#' title='' >咖啡/热卖</a></div>
						<div class='P10SCTitle' style='background:#f1f1f1;'><a href='#' title='' >口味</a></div>
						<div class='P10SCTitle'><a href='#' title='' >咖啡/热卖</a></div>
						<div class='P10SCTitle' style='background:#f1f1f1;'><a href='#' title='' >口味</a></div>
						<div class='P10SCTitle'><a href='#' title='' >咖啡/热卖</a></div>
						<div class='P10SCTitle' style='background:#f1f1f1;'><a href='#' title='' >口味</a></div>
                        <div class='P10SCTitle'><a href='#' title='' >咖啡/热卖</a></div>
						<div class='P10SCTitle' style='background:#f1f1f1;'><a href='#' title='' >口味</a></div>
                        <div class='P10SCTitle'><a href='#' title='' >咖啡/热卖</a></div>
						<div class='P10SCTitle' style='background:#f1f1f1;'><a href='#' title='' >口味</a></div>
                          <div class='P10SCTitle'><a href='#' title='' >咖啡/热卖</a></div>
                      
                        
					</div>
					<!--End 二级栏目-->
</div>
				<div class='P10Clear'></div>
			</div>
		</div>
	<div class='P10Content'></div>
	
    <div id="player"><img src="../coffee/images/loading.gif" _fcksavedurl="../coffee/images/loading.gif" style="margin-top:220px"/></div>
<div id="operator"> <a href="#" _fcksavedurl="#" class="btnLeft"></a> <a href="#" _fcksavedurl="#" class="btnRight"></a>
  <div class="thumbWrap">
    <ul class="thumbnails">
      <li class="current" url="蓝山咖啡/01300000329092124093042768566.jpg">
        <div class="img"><img src="蓝山咖啡/013000003290921240930427685661.jpg" _fcksavedurl="蓝山咖啡/013000003290921240930427685661.jpg" alt=""/></div>
        <div class="detail">
          <h2>蓝山咖啡</h2>
          <div class="poster"><span>Photo</span> CNwander</div> 
        </div>
      </li>
      <li url="折叠苏门答腊曼特宁/123917916_300_300.jpg">
        <div class="img"><img src="折叠苏门答腊曼特宁/123917916_300_3001.jpg" _fcksavedurl="折叠苏门答腊曼特宁/123917916_300_3001.jpg" alt=""/></div>
        <div class="detail">
          <h2>折叠苏门答腊曼特宁</h2>
          <div class="poster"><span>Photo</span> CNwander</div>
        
        </div>
      </li>
      <li url="折叠高乐雅咖啡/20130801191622-1135745704.jpg">
        <div class="img"><img src="折叠高乐雅咖啡/20130801191622-11357457041.jpg" _fcksavedurl="折叠高乐雅咖啡/20130801191622-11357457041.jpg" alt=""/></div>
        <div class="detail">
          <h2>折叠高乐雅咖啡</h2>
              <div class="poster"><span>Photo</span> CNwander</div>
        
        </div>
      </li>
      <li url="摩卡咖啡/thumb (1).jpg">
        <div class="img"><img src="摩卡咖啡/thumb (1)1.jpg" _fcksavedurl="摩卡咖啡/thumb (1)1.jpg" alt=""/></div>
        <div class="detail">
          <h2>摩卡咖啡</h2>
             <div class="poster"><span>Photo</span> CNwander</div>
        </div>
      </li>
      <li url="折叠苏门答腊曼特宁/123917916_300_300.jpg">
        <div class="img"><img src="折叠苏门答腊曼特宁/123917916_300_3001.jpg" _fcksavedurl="折叠苏门答腊曼特宁/123917916_300_3001.jpg" alt=""/></div>
        <div class="detail">
          <h2>折叠苏门答腊曼特宁</h2>
              <div class="poster"><span>Photo</span> CNwander</div>
        </div>
      </li>
      <li url="images/a.jpg">
        <div class="img"><img src="images/a1.jpg" _fcksavedurl="images/a1.jpg" alt=""/></div>
        <div class="detail">
          <h2>阿里山玛翡咖啡</h2>
              <div class="poster"><span>Photo</span> CNwander</div>
         
        </div>
      </li>
      <li url="images/5653952_102040339000_2.jpg">
        <div class="img"><img src="images/5653952_102040339000_21.jpg" _fcksavedurl="images/5653952_102040339000_21.jpg" alt=""/></div>
        <div class="detail">
          <h2>摩卡咖啡</h2>
            <div class="poster"><span>Photo</span> CNwander</div>
        </div>
      </li>
      <li class="current" url="蓝山咖啡/01300000329092124093042768566.jpg">
        <div class="img"><img src="蓝山咖啡/013000003290921240930427685661.jpg" _fcksavedurl="蓝山咖啡/013000003290921240930427685661.jpg" alt=""/></div>
        <div class="detail">
          <h2>蓝山咖啡</h2>
              <div class="poster"><span>Photo</span> CNwander</div>   
        </div>
      </li>
      <li url="折叠苏门答腊曼特宁/123917916_300_300.jpg">
        <div class="img"><img src="折叠苏门答腊曼特宁/123917916_300_3001.jpg" _fcksavedurl="折叠苏门答腊曼特宁/123917916_300_3001.jpg" alt=""/></div>
        <div class="detail">
          <h2>折叠苏门答腊曼特宁</h2>
              <div class="poster"><span>Photo</span> CNwander</div>        
        </div>
      </li>
      <li url="折叠高乐雅咖啡/20130801191622-1135745704.jpg">
        <div class="img"><img src="折叠高乐雅咖啡/20130801191622-11357457041.jpg" _fcksavedurl="折叠高乐雅咖啡/20130801191622-11357457041.jpg" alt=""/></div>
        <div class="detail">
          <h2>折叠高乐雅咖啡</h2>
              <div class="poster"><span>Photo</span> CNwander</div>        
        </div>
      </li>
      <li url="摩卡咖啡/thumb (1).jpg">
        <div class="img"><img src="摩卡咖啡/thumb (1)1.jpg" _fcksavedurl="摩卡咖啡/thumb (1)1.jpg" alt=""/></div>
        <div class="detail">
          <h2>摩卡咖啡</h2>
             <div class="poster"><span>Photo</span> CNwander</div>        
        </div>
      </li>
      <li url="阿里山玛翡咖啡/affffa476b31aa1f.jpg">
        <div class="img"><img src="阿里山玛翡咖啡/affffa476b31aa1f1.jpg" _fcksavedurl="阿里山玛翡咖啡/affffa476b31aa1f1.jpg" alt=""/></div>
        <div class="detail">
          <h2>阿里山玛翡咖啡</h2>
             <div class="poster"><span>Photo</span> CNwander</div>        
        </div>
      </li>
      <li url="images/a.jpg">
        <div class="img"><img src="images/a1.jpg" _fcksavedurl="images/a1.jpg" alt=""/></div>
        <div class="detail">
          <h2>阿里山玛翡咖啡</h2>
              <div class="poster"><span>Photo</span> CNwander</div>        
        </div>
      </li>
      <li url="images/5653952_102040339000_2.jpg">
        <div class="img"><img src="images/5653952_102040339000_21.jpg" _fcksavedurl="images/5653952_102040339000_21.jpg" alt=""/></div>
        <div class="detail">
          <h2>摩卡咖啡</h2>
            <div class="poster"><span>Photo</span> CNwander</div>       
        </div>
      </li>      
      <li class="current" url="蓝山咖啡/01300000329092124093042768566.jpg">
        <div class="img"><img src="蓝山咖啡/013000003290921240930427685661.jpg" _fcksavedurl="蓝山咖啡/013000003290921240930427685661.jpg" alt=""/></div>
        <div class="detail">
          <h2>蓝山咖啡</h2>
              <div class="poster"><span>Photo</span> CNwander</div>       
        </div>
      </li>
      <li url="折叠苏门答腊曼特宁/123917916_300_300.jpg">
        <div class="img"><img src="折叠苏门答腊曼特宁/123917916_300_3001.jpg" _fcksavedurl="折叠苏门答腊曼特宁/123917916_300_3001.jpg" alt=""/></div>
        <div class="detail">
          <h2>折叠苏门答腊曼特宁</h2>
              <div class="poster"><span>Photo</span> CNwander</div>         
        </div>
      </li>
      <li url="折叠高乐雅咖啡/20130801191622-1135745704.jpg">
        <div class="img"><img src="折叠高乐雅咖啡/20130801191622-11357457041.jpg" _fcksavedurl="折叠高乐雅咖啡/20130801191622-11357457041.jpg" alt=""/></div>
        <div class="detail">
          <h2>折叠高乐雅咖啡</h2>
              <div class="poster"><span>Photo</span> CNwander</div>        
        </div>
      </li>
      <li url="摩卡咖啡/thumb (1).jpg">
        <div class="img"><img src="摩卡咖啡/thumb (1)1.jpg" _fcksavedurl="摩卡咖啡/thumb (1)1.jpg" alt=""/></div>
        <div class="detail">
          <h2>摩卡咖啡</h2>
             <div class="poster"><span>Photo</span> CNwander</div>        
        </div>
      </li>
      <li url="阿里山玛翡咖啡/affffa476b31aa1f.jpg">
        <div class="img"><img src="阿里山玛翡咖啡/affffa476b31aa1f1.jpg" _fcksavedurl="阿里山玛翡咖啡/affffa476b31aa1f1.jpg" alt=""/></div>
        <div class="detail">
          <h2>阿里山玛翡咖啡</h2>
             <div class="poster"><span>Photo</span> CNwander</div>        
        </div>
      </li>
      <li url="images/a.jpg">
        <div class="img"><img src="images/a1.jpg" _fcksavedurl="images/a1.jpg" alt=""/></div>
        <div class="detail">
          <h2>阿里山玛翡咖啡</h2>
              <div class="poster"><span>Photo</span> CNwander</div>        
        </div>
      </li>    
    </ul>
  </div>
  <div class="track">
    <div class="slideDragger">
      <div class="cover"></div>
    </div>
  </div>
  <div id="test" style="margin-top:5px;color:white"></div>
</div>
<br>
       <div class="duiqi">		
				<div class="popular">
				<h3>Coffee Types</h3>			
				<ul class="popular-in">
					<li><a href="#"><i> </i>康宝蓝(Espresso Con Panna)。意大利语中，Con是搅拌，Panna是生奶油，康宝蓝即意式浓缩咖啡加上鲜奶油</a></li>
					<li><a href="#"><i> </i>浓缩咖啡(Espresso)，原文是意大利语，有“立即为你煮”的意思，是俗称的意大利特浓咖啡。浓缩咖啡是利用高压，让沸水在短短几秒里迅速通过咖啡粉，得到约1/4盎司的咖啡，味苦而浓香。 </a></li>
					<li><a href="#"><i> </i>玛奇朵(Espresso Macchiato)。Macchiato原文为意大利语，代表“印记、烙印”的意思，发音为“玛奇雅朵”，但我们习惯称呼它玛奇朵。</a></li>
					<li><a href="#"><i> </i>白咖啡(Flat White)。马来西亚土特产，约有100多年的历史</a></li>
					</ul>
				</div>
				<div class="popular phone">
					<h3>Caffe</h3>
					<ul class="number">
					<p>12345678</p>
						<li><span><i> </i>0427-182182131099</span ></li>
						<li><a href="#"><i class="mail"> </i>info@sitename.com </a></li>	</ul>
				</div>
				<div class="popular">
					<h3>Flavor</h3>
					<p>Coffee in the morning makes me happy</p>
					<form>
					<input type="text" value="your email id here" onFocus="this.value='';" onBlur="if (this.value == '') {this.value = 'your email id here';}">
					<input type="submit" value="Subscribe" >
					</form>
				</div>
				</div>   
   <!---->
				<div class="cup">
                <div class="cup-in">
             	<a href="#"><img src="images/p1.jpg" class="img-responsive" alt=""></a>
						<p>There was a smell of coffee pervading the atmosphere</p>
						<span class="dollar">$25.89</span>
						<div class="details-in">
							<a href="sum.html" class="details">Details</a>
						</div>
						<div class="clearfix"> </div>
					</div>                 
					<div class="cup-in">
						<a href="#"><img src="images/p2.jpg" class="img-responsive" alt=""></a>
						<p>There was a smell of coffee pervading the atmosphere</p>
						<span class="dollar">$25.89</span>
						<div class="details-in">
							<a href="sum.html" class="details">Details</a>
						</div>
						<div class="clearfix"> </div>
					</div>
					<div class="cup-in">
						<a href="#"><img src="images/p3.jpg" class="img-responsive" alt=""></a>
						<p>There was a smell of coffee pervading the atmosphere</p>
						<span class="dollar">$25.89</span>
						<div class="details-in">
							<a href="sum.html" class="details">Details</a>
						</div>
						<div class="clearfix"> </div>
					</div>
					
					<div class="cup-in">
						<a href="#"><img src="images/p4.jpg" class="img-responsive" alt=""></a>
						<p>There was a smell of coffee pervading the atmosphere</p>
						<span class="dollar">$25.89</span>
						<div class="details-in">
							<a href="sum.html" class="details">Details</a>
						</div>
						<div class="clearfix"> </div>
					</div>
					<div class="cup-in">
						<a href="single.html"><img src="images/p5.jpg" class="img-responsive" alt=""></a>
						<p>There was a smell of coffee pervading the atmosphere</p>
						<span class="dollar">$25.89</span>
						<div class="details-in">
							<a href="sum.html" class="details">Details</a>
						</div>
						<div class="clearfix"> </div>
					</div>
					<div class="cup-in">
						<a href="#"><img src="images/p6.jpg" class="img-responsive" alt=""></a>
						<p>There was a smell of coffee pervading the atmosphere</p>
						<span class="dollar">$25.89</span>
						<div class="details-in">
							<a href="sum.html" class="details">Details</a>
						</div>
						<div class="clearfix"> </div>
					</div>
					<div class="clearfix"> </div>
				</div>
				</div>	
				<!---->
				<div class="footer_placeholder"></div>
</div>     
                    <div class="footer">           
		 <p class="shu">计算机科学与技术系<br>14110100731李簿原<a href="#" title="李簿原" target="_blank">@neusoft</a></p>
	</div>	
	</body>
</html>